import { Component, Vue, Prop, Emit } from "vue-property-decorator";

const name = "ProcessLog";

function getStatusName(key: string): string {
  const StatusMap: any = {
    start: "开始",
    agree: "同意",
    reject: "退回",
    awaiting_check: "待审",
    end: "结束",
  };
  return StatusMap[key] || "未知";
}
@Component({
  name,
})
class ProcessLog extends Vue {
  protected processLogClassName = "a-process-log";
  @Prop()
  processLogData!: AnyArray;
  static install: (Vue: any) => void;

  @Emit("actionClick")
  fileClick(file: AnyObject, record: AnyObject) {
    return {
      file,
      record,
    };
  }

  render() {
    const { processLogData } = this.$props;
    const { processLogClassName, fileClick } = this;
    const { dot: slotsDot } = this.$slots;

    // const fileMap = {
    //   doc: "W",
    //   xls: "E",
    //   xlsx: "E",
    //   png: "P",
    // };
    if (!processLogData || !processLogData.length) {
      console.error("数据源必须存在!");
      return null;
    }
    return (
      <a-timeline class={processLogClassName}>
        {processLogData.map((timeLine: AnyObject) => {
          return (
            <a-timeline-item class={`${processLogClassName}-item`}>
              {slotsDot && <div slot="dot">{slotsDot}</div>}
              <div class={`${processLogClassName}-item-title`}>
                {timeLine.taskName}
              </div>
              <div class={`${processLogClassName}-item-content`}>
                <div class={`${processLogClassName}-item-content-title`}>
                  <img src={require("@/assets/img/avatar.png")} alt="" />
                  <div
                    class={`${processLogClassName}-item-content-title-avatar`}
                  >
                    <span>{timeLine.approverName || timeLine.assignInfo1}</span>
                    <span>{timeLine.createTime}</span>
                  </div>
                </div>
                <div class={`${processLogClassName}-item-content-description`}>
                  <span>情况说明:</span>
                  <span>{timeLine.opinion || "未填写说明"}</span>
                </div>
                {(timeLine.fileList && timeLine.fileList.length && (
                  <div
                    class={`${processLogClassName}-item-content-file-content`}
                  >
                    {timeLine.fileList.map((file: AnyObject) => {
                      return (
                        <div
                          class={`${processLogClassName}-item-content-file-content-item`}
                        >
                          <div
                            class={`${processLogClassName}-item-content-file-content-item-docx`}
                          >
                            <span>{file.fileType[0].toUpperCase()}</span>
                          </div>
                          <div
                            class={`${processLogClassName}-item-content-file-content-item-title`}
                          >
                            <span>{file.fileName}</span>
                            <span>{file.fileSize}</span>
                          </div>
                          <div
                            class={`${processLogClassName}-item-content-file-content-item-action`}
                            onclick={() => fileClick(file, timeLine)}
                          >
                            <img
                              src={require("@/assets/img/actionRound.png")}
                              alt={"操作"}
                            />
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )) ||
                  ""}
                <div class={`${processLogClassName}-item-content-action`}>
                  <span>操作：</span>
                  <span>{getStatusName(timeLine.status)}</span>
                </div>
              </div>
            </a-timeline-item>
          );
        })}
      </a-timeline>
    );
  }
}

ProcessLog.install = function(Vue) {
  Vue.component(name, ProcessLog);
};

export default ProcessLog;
